<template>
  <div>
    <div style="height: 60px; line-height: 60px">
      <Icon type="ios-bookmark" style="vertical-align: middle" />
      <i>{{ tableData.name }}</i>
    </div>
    <div>
      <Table
        border
        ref="selection"
        :columns="tableData.columns4"
        :data="tableData.data1"
      >
        <template slot-scope="{ row, index }" slot="updated">
          <span>{{ $moment(row.updated).format("YYYY-MM-DD") }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="created">
          <span>{{ $moment(row.created).format("YYYY-MM-DD") }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <!--          <div style="fontSize:10px;color:#559DF9; cursor:pointer">-->
          <!--            <icon type="md-trash" style="margin-left: 5px;  " @click="removeItem(row)"></icon>-->
          <!--            <i style=" margin-right: 5px; " @click="removeItem(row)">删除</i>-->
          <!--          </div>-->
          <div style="white-space: nowrap">
            <Button size="small" @click="toRemoveItem(row)" type="warning">
              删除
            </Button>
          </div>
        </template>
      </Table>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { DeviceUse } from "@/base/model/DeviceUse";
import { DevicesBloc } from "./DevicesBloc";
@Component({
  components: {},
})
export default class extends Vue {
  @Prop(Object) readonly tableData: any | undefined;
  bloc: DevicesBloc = new DevicesBloc();
  toRemoveItem(dataItem: DeviceUse) {
    this.$Modal.confirm({
      title: "提示",
      content: "确认删除后将无法恢复！还要继续吗？",
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
        if (this.tableData.name == "设备使用日志") {
          //删除设备使用日志
          this.bloc
            .removeUseItem(dataItem)
            .then((value) => {
              this.bloc
                .getDeviceUse(
                  this.bloc.angent.pageIndex,
                  this.bloc.angent.pageSize,
                  "DESC",
                  this.bloc.company.id,
                  this.$route.params.id
                )
                .then((res) => {
                  this.tableData.data1 = res.data.items;
                });
            })
            .then(() => {
              this.$Message.success("删除成功");
            })
            .catch((e) => {
              this.$Message.error("删除失败");
            });
        } else {
          //删除故障记录
          this.bloc
            .removeFaultItem(dataItem)
            .then((value) => {
              this.bloc.getDeviceFault(1, 10, "DESC",this.$route.params.id).then((res) => {
                this.tableData.data1 = res.data.items;
              });
            })
            .then(() => {
              this.$Message.success("删除成功");
            })
            .catch((e) => {
              this.$Message.error("删除失败");
            });
        }
      },
    });
  }
}
</script>
<style lang="less" scoped>
</style>
